<div class="bg-primary text-white p-2" [class.bg-warning]="editing">
  <h5>{{editing  ? "Edit" : "Create"}} Product</h5>
</div>

<form novalidate #form="ngForm" (ngSubmit)="submitForm(form)" (reset)="resetForm()" >

  <div class="form-group">
      <label>Name</label>
      <input class="form-control" name="name"
             [(ngModel)]="product.name" required />
  </div>

  <div class="form-group">
      <label>Category</label>
      <input class="form-control" name="category"
             [(ngModel)]="product.category" required />
  </div>

  <div class="form-group">
      <label>Price</label>
      <input class="form-control" name="price"
             [(ngModel)]="product.price"
             required pattern="^[0-9\.]+$" />
  </div>

  <button type="submit" class="btn btn-primary m-1"
          [class.btn-warning]="editing" [disabled]="form.invalid">
      {{editing ? "Save" : "Create"}}
  </button>
  <button type="reset" class="btn btn-secondary m-1">Cancel</button>
</form>
